<script setup>
  import {computed} from "vue";

  // data
  const props = defineProps(['shopCartInfo'])

  // computed
  // 被选中的商品列表
  const shopCartCheckedList = computed(()=>{
    return props.shopCartInfo.list.filter(item => item.checked)
  })

  // 被选中的商品数量
  const shopCartCheckedCount = computed(()=>{
    return shopCartCheckedList.value.reduce((res, item) => res + item.number, 0)
  })
</script>

<template>
  <div class="card">
    <div class="card_shop_name">{{  props.shopCartInfo.name }}</div>
    <div class="card_list">
      <div class="card_list_item" v-for="item in shopCartCheckedList" :key="item.id">
        <div class="card_list_item_img">
          <img :src="`http://www.dell-lee.com/imgs/vue3/${item.imgName}.png`" alt="">
        </div>
        <div class="card_list_item_content">
          <div class="card_list_item_content_title">{{ item.title }}</div>
          <div class="card_list_item_content_price">
            <span class="highlight">￥{{ item.price }} x {{ item.number }}</span>
            <span>￥{{ (item.price * item.number.toFixed(2)) }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="card_total">共计{{ shopCartCheckedCount }}件</div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
@import "@/style/mixins.scss";
.card {
  margin: .18rem;
  padding: .18rem;
  background-color: $bgColor;

  &_shop_name {
    line-height: .42rem;
    font-size: .16rem;
    margin-bottom: .18rem;
  }

  &_list {
    &_item {
      display: flex;
      margin-bottom: .18rem;

      &_img {
        width: .48rem;
        margin-right: .18rem;
        img {
          width: .48rem;
          height: .48rem;
        }
      }
      &_content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        &_title {
          font-size: .14rem;
          font-weight: bold;
          color: $content_fontcolor;
          @include ellipse;
        }
        &_price {
          display: flex;
          justify-content: space-between;

          .highlight {
            color: $hightlight-fontColor;
          }
        }
      }
    }
  }

  &_total {
    line-height: .26rem;
    text-align: center;
    font-size: .14rem;
    color: $light-fontColor;
    background-color: $search-bgColor;
  }
}
</style>